<template>
  <div class="app-container home">
    <el-row :gutter="5" class="panel-group">
      <el-col :span="4" class="card-panel-col">
        <div class="card-panel" style="background: rgb(24,175,40)">
          <div class="card-panel-icon-wrapper">
            <svg-icon icon-class="users" class-name="card-panel-icon" />
          </div>
          <div class="card-panel-description">
            <count-to  :start-val="0" :end-val="allConcatNum" :duration="3000" class="card-panel-num"/>&nbsp;<span class="unit">单</span>
            <div class="card-panel-text">总合同数</div>
          </div>
        </div>
      </el-col>
      <el-col :span="4" class="card-panel-col">
        <div class="card-panel" style="background: rgb(242,149,4)">
          <div class="card-panel-icon-wrapper">
            <svg-icon icon-class="user" class-name="card-panel-icon" />
          </div>
          <div class="card-panel-description">
            <count-to  :start-val="0" :end-val="srPrice" :duration="3000" class="card-panel-num"/>&nbsp;<span class="unit">元</span>
            <div class="card-panel-text">收入金额</div>
          </div>
        </div>
      </el-col>
      <el-col :span="4" class="card-panel-col">
        <div class="card-panel" style="background: rgb(244,84,56)">
          <div class="card-panel-icon-wrapper">
            <svg-icon icon-class="yePrice" class-name="card-panel-icon" />
          </div>
          <div class="card-panel-description">
            <count-to  :start-val="0" :end-val="payPrice" :duration="3000" class="card-panel-num"/>&nbsp;<span class="unit">元</span>
            <div class="card-panel-text">支出金额</div>
          </div>
        </div>
      </el-col>
      <el-col :span="4" class="card-panel-col">
        <div class="card-panel" style="background: rgb(60,100,600)">
          <div class="card-panel-icon-wrapper">
            <svg-icon icon-class="order" class-name="card-panel-icon" />
          </div>
          <div class="card-panel-description">
            <count-to  :start-val="0" :end-val="dbOrderNum" :duration="3000" class="card-panel-num"/>&nbsp;<span class="unit">单</span>
            <div class="card-panel-text">待办订单数</div>
          </div>
        </div>
      </el-col>
      <el-col :span="5" class="card-panel-col">
        <div class="card-panel" style="background: rgb(17,169,226)">
          <div class="card-panel-icon-wrapper">
            <svg-icon icon-class="price" class-name="card-panel-icon" />
          </div>
          <div class="card-panel-description">
            <count-to  :start-val="0" :end-val="dPayOrderNum" :duration="3000" class="card-panel-num"/>&nbsp;<span class="unit">单</span>
            <div class="card-panel-text">待付款订单数</div>
          </div>
        </div>
      </el-col>
    </el-row>

    <el-row :gutter="10">
      <el-col :span="24">
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span>待办订单详情</span>
          </div>
          <el-table v-loading="loading" :data="orderList" border>
            <el-table-column
              label=""
              type="index"
              width="50"
              align="center">
              <template scope="scope">
                <span>{{(queryParams.pageNum - 1) * queryParams.pageSize + scope.$index + 1}}</span>
              </template>
            </el-table-column>
            <el-table-column label="订单号" align="center" prop="orderCode" :show-overflow-tooltip="true"/>
            <el-table-column label="订单类型" align="center">
              <template slot-scope="scope">
                <dict-tag :options="dict.type.wms_order_audit_type" :value="scope.row.type"/>
              </template>
            </el-table-column>
            <el-table-column label="剩余天数" align="center" prop="diffDays">
              <template slot-scope="scope">
                {{scope.row.diffDays ? scope.row.diffDays : '无统计'}}
              </template>
            </el-table-column>
            <el-table-column label="状态" align="center">
              <template slot-scope="scope">
                <el-tag type="primary">{{ statusMap.get(scope.row.type + '-' + scope.row.status) }}</el-tag>
              </template>
            </el-table-column>
            <el-table-column label="创建时间" align="center" prop="createTime"/>
            <el-table-column label="操作" align="center" class-name="small-padding fixed-width" width="100">
              <template slot-scope="scope">
                <el-button
                  size="mini"
                  type="text"
                  icon="el-icon-edit"
                  @click="handleLook(scope.row)"
                >查看详情</el-button>
              </template>
            </el-table-column>
          </el-table>

          <pagination
            v-show="dbOrderNum>0"
            :total="dbOrderNum"
            :page.sync="queryParams.pageNum"
            :limit.sync="queryParams.pageSize"
            @pagination="getOrderList"
          />

        </el-card>
      </el-col>
    </el-row>

    <el-row :gutter="10" v-if="appSign">
      <el-col :span="12">
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span>用户增长趋势</span>
          </div>
          <ve-line :data="yhData" :settings="yhChartSettings" :colors="colors" :extend="yhExtend"></ve-line>
        </el-card>
      </el-col>
    </el-row>

    <el-row :gutter="10" style="margin-top: 10px" v-if="appSign">
      <el-col :span="24">
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span>销量商品排名</span>
          </div>
          <ve-histogram :data="productData" :settings="productChartSettings" :colors="pColors" :extend="productExtend"></ve-histogram>
        </el-card>
      </el-col>
    </el-row>

    <el-row :gutter="10" v-if="appSign">
      <el-card class="box-card">
        <div slot="header" class="clearfix">
          <span>API访问趋势</span>
        </div>
        <ve-line :data="apiData" :settings="apiChartSettings" :colors="colors" :extend="yhExtend"></ve-line>
      </el-card>
    </el-row>
  </div>
</template>

<script>
import CountTo from 'vue-count-to'
import VeLine from 'v-charts/lib/line.common'
import VePie from 'v-charts/lib/pie.common'
import VeHistogram from 'v-charts/lib/histogram.common'
import { getHandleOrder, getHomeInfo } from "@/api/wms/home";

export default {
  name: "Index",
  components: { CountTo, VeLine, VePie, VeHistogram },
  dicts: ['wms_order_audit_type'],
  data() {
    return {
      appSign: false,
      btnLoading: false,
      // 总合同数
      allConcatNum: 0,
      // 收入金额
      srPrice: 0,
      // 支出金额
      payPrice: 0,
      // 待办订单数
      dbOrderNum: 0,
      // 待付款订单数
      dPayOrderNum: 0,
      loading: false,
      queryParams: {
        pageNum: 1,
        pageSize: 5
      },
      statusMap: new Map(),
      orderList: [],
      colors: [ 'rgb(213,58,53)' ],
      //用户增长趋势
      yhChartSettings: {
        title: {
          show: true,
          text: '用户增长趋势',
          textStyle: {
            fontWeight: 'bolder'
          }
        },
        yAxisName: ["人数"]
      },
      yhData: {
        // columns 里面放的是要展示的数据
        columns: ["日期","人数"],
        // 写入数据的地方
        rows: []
      },
      //API访问趋势
      apiChartSettings: {
        title: {
          show: true,
          text: 'API访问趋势',
          textStyle: {
            fontWeight: 'bolder'
          }
        },
        yAxisName: ["访问次数"]
      },
      apiData: {
        // columns 里面放的是要展示的数据
        columns: ["日期","访问次数"],
        // 写入数据的地方
        rows: []
      },
      yhExtend: {
        // x轴字体斜显示
        xAxis: {
          axisLabel: {
            margin: 15,
            interval: 0,
            rotate: 45
          },
          triggerEvent: true
        }
      },
      pColors: [ 'rgb(213,58,53)', 'rgb(150,100,255)' ],
      //商品销量排名
      productChartSettings: {
        title: {
          show: true,
          text: '商品销量排名',
          textStyle: {
            fontWeight: 'bolder'
          }
        }
      },
      productData: {
        // columns 里面放的是要展示的数据
        columns: ["商品","月销量", "日销量"],
        // 写入数据的地方
        rows: []
      },
      productExtend:{
        // 柱子宽度
        series: {
          barWidth: 25
        },
        // x轴字体斜显示
        xAxis: {
          axisLabel: {
            margin: 15,
            interval: 0,
            rotate: 45
          },
          triggerEvent: true
        }
      }
    };
  },
  created(){
    this.statusMap.set("10-0", '待询价')
    this.statusMap.set("0-0", '待比价')
    this.statusMap.set("0-3", '待审核')
    this.statusMap.set("12-0", '进行中')
    this.statusMap.set("12-3", '待完善')
    this.statusMap.set("12-5", '待审核')
    this.statusMap.set("1-0", '待采购')
    this.statusMap.set("1-1", '待物流')
    this.statusMap.set("1-2", '待付款')
    this.statusMap.set("1-4", '待审核')
    this.statusMap.set("1-5", '物流中')
    this.statusMap.set("1-6", '生产中')
    this.statusMap.set("2-0", '生产中')
    this.statusMap.set("2-1", '物流中')
    this.statusMap.set("2-2", '待付款')
    this.statusMap.set("3-0", '物流中')
    this.statusMap.set("3-1", '异常')
    this.statusMap.set("3-2", '清关中')
    this.statusMap.set("3-4", '待付款')
    this.statusMap.set("3-5", '新增-待审核')
    this.statusMap.set("3-6", '审核失败')
    this.statusMap.set("3-7", '待审核')
    this.statusMap.set("4-0", '清关中')
    this.statusMap.set("4-1", '待审核')
    this.getInfo()
    this.getOrderList()
    setInterval(()=>{
      this.getInfo()
      this.getOrderList()
    }, 1800000)
  },
  methods: {
    getInfo() {
      getHomeInfo({}).then(response => {

        let data = response.data; console.log(data)
        this.allConcatNum = data.allConcatNum
        this.srPrice = data.srPrice
        this.payPrice = data.payPrice
        this.dPayOrderNum = data.dPayOrderNum



        // if (data.qs) {
        //   let rows = []
        //   data.qs.forEach(q => {
        //     rows.push({ '日期': q.rq, '人数': q.rs })
        //   })
        //   this.yhData.rows = rows
        // }
        // if (data.sp) {
        //   let rows = []
        //   data.sp.forEach((q, index) => {
        //     rows.push({ '商品': q.key, '月销量': q.sl, '日销量': q.daySl })
        //   })
        //   this.productData.rows = rows
        // }
      });
    },
    getOrderList(){
      getHandleOrder(this.queryParams).then(response => {
        this.orderList = response.rows
        this.dbOrderNum = response.total;

      })
    },
    // 取消按钮
    cancel() {
      this.open = false;
      this.reset();
    },
    handleLook(row){
      switch (row.type) {
        case '10':
          this.$router.push({path: '/order/inquireOrder'})
          break
        case '12':
          this.$router.push({path: '/order/offerOrder'})
          break
        case '0':
          this.$router.push({path: '/order/priceComparisonOrder'})
          break
        case '1':
          this.$router.push({path: '/order/contractOrder'})
          break
        case '2':
          this.$router.push({path: '/order/purchaseOrder'})
          break
        case '3':
          this.$router.push({path: '/order/logisticsOrder'})
          break
        case '4':
          this.$router.push({path: '/order/clearOrder'})
          break
      }
    }
  }
};
</script>

<style scoped lang="scss">
.unit{
  color: white;
}
.panel-group {
  margin-top: 18px;

  .card-panel-col{
    margin-bottom: 32px;
  }
  .card-panel {
    height: 108px;
    cursor: pointer;
    font-size: 12px;
    position: relative;
    overflow: hidden;
    // color: #666;
    background: #fff;
    box-shadow: 4px 4px 40px rgba(0, 0, 0, .05);
    border-color: rgba(0, 0, 0, .05);
    &:hover {
      .card-panel-icon-wrapper {
        color: #fff;
      }
    }

    .card-panel-icon-wrapper {
      float: left;
      margin: 14px 0 0 14px;
      padding: 16px;
      transition: all 0.38s ease-out;
      border-radius: 6px;
    }
    .card-panel-icon {
      float: left;
      font-size: 48px;
    }
    .card-panel-description {
      float: left;
      font-weight: bold;
      // width: 200px;
      text-align: right;
      margin: 26px;
      margin-left: 0px;
      .card-panel-text {
        line-height: 18px;
        color: white;
        font-size: 16px;
        margin-bottom: 12px;
      }
      .card-panel-num {
        font-size: 20px;
        color: white;
      }
    }
  }
}
</style>
